<template>
    <el-table :data="filterTableData" class="table">
      <el-table-column label="注册时间" prop="registerTime" />
      <el-table-column label="注册账号" prop="account" />
      <el-table-column label="账号类型" prop="accountDesc" />
      <el-table-column label="真实姓名" prop="realName" />
      <el-table-column label="工作部门" prop="department" />
      <el-table-column label="联系电话" prop="phoneNo" />
      <el-table-column label="电子邮箱" prop="email" />
      <el-table-column>
        <template #header>
          <el-input v-model="search" size="small" placeholder="输入关键字进行搜索" />
        </template>
        <template #default="scope">
          <el-button
            type="success"
            @click="handleApproval(scope.$index, scope.row)"
            v-loading="approvalLoading && loadingAccount.indexOf(tableData[scope.$index].account) !== -1">通过</el-button>
          <el-button
            type="danger" 
            @click="handleReject(scope.$index, scope.row)"
            v-loading="rejectLoading && loadingAccount.indexOf(tableData[scope.$index].account) !== -1">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
  </template>
  
  <script setup lang="ts" name="RegisterApproval">
    import { computed, ref, onMounted, reactive } from 'vue'
    import { ElMessage } from 'element-plus';
    import moment from "moment";
    import request from "@/requests/request";


    interface RegisterItem {
        registerTime: string,
        account: string,
        accountDesc: string,
        realName: string,
        department: string,
        phoneNo: string,
        email: string,
    }

    const tableData = reactive<Array<RegisterItem>>([])
    let loadingAccount = reactive<Array<string>>([])
    
    const search = ref('')
    const filterTableData = computed(() =>
        tableData.filter(
        (data) =>
            !search.value ||
            data.realName.toLowerCase().includes(search.value.toLowerCase())
        )
    )
    const approvalLoading = ref(false)
    const handleApproval = (index: number, row: RegisterItem) => {
        console.log("handleApproval", index, row)
        approvalLoading.value = true
        loadingAccount.push(tableData[index].account)
        const content = `尊敬的${tableData[index].realName}:\n\t您申请的${tableData[index].account}账号请求已通过。`
        const data = {
            account: tableData[index].account,
            registerStatus: 2, // 从注册完成状态修改成审批通过状态(1--->2)
            emailInfo: {
              receiver: tableData[index].email,
              subject: "注册申请通过",
              content,
            }
        }
        request.post("/approveRegister", data).then((res: any) => {
            approvalLoading.value = false
            loadingAccount = loadingAccount.filter((account: string)=> {
                account !== tableData[index].account
            })
            const {data, message, resCode} = res.data
            ElMessage({
              message: message,
              type: data ? 'success' : 'error',
            })
            if (data) {
              tableData.splice(index, 1)
            }
            console.log(data, message, resCode)
        }).catch((reason: any) => {
            approvalLoading.value = false
            loadingAccount = loadingAccount.filter((account: string)=> {
                account !== tableData[index].account
            })
            ElMessage({
              message: "审批注册状态失败",
              type: 'error',
            })
            console.log(reason)
        })
    }
    const rejectLoading = ref(false)
    const handleReject = (index: number, row: RegisterItem) => {
        console.log("handleReject", index, row)
        rejectLoading.value = true
        loadingAccount.push(tableData[index].account)
        const content = `尊敬的${tableData[index].realName}:\n\t您申请的${tableData[index].account}账号请求被拒绝。如有疑问, 请与管理员进行沟通。`
        const data = {
            "account": tableData[index].account,
            "registerStatus": 3, // 从注册完成状态修改成审批拒绝状态(1--->3)
            emailInfo: {
              receiver: tableData[index].email,
              subject: "注册申请被拒",
              content,
            }
        }
        request.post("/rejectRegister", data).then((res: any) => {
            rejectLoading.value = false
            loadingAccount = loadingAccount.filter((account: string)=> {
                account !== tableData[index].account
            })
            const {data, message, resCode} = res.data
            ElMessage({
              message: message,
              type: data ? 'success' : 'error',
            })
            if (data) {
              tableData.splice(index, 1)
            }
            console.log(data, message, resCode)
        }).catch((reason: any) => {
            loadingAccount = loadingAccount.filter((account: string)=> {
                  account !== tableData[index].account
              })
            rejectLoading.value = false
            ElMessage({
              message: "拒绝注册状态失败",
              type: 'error',
            })
            console.log(reason)
        })
    }

    function getAccountDesc(accountRole: number): string {
      switch (accountRole) {
        case 0:
          return "管理员账号";
        case 1:
          return "私有账号"
        case 2:
          return "公用账号"
        default:
          return "其它"
      }
    }


    onMounted(()=> {
        const formData = new FormData()
        formData.append("registerStatus", "1")  // 注册完成, 但还未审批
        const headers = {
            ContentType: "application/x-www-form-urlencoded",
        }
        request.post("/queryAccountInfoByStatus", formData, {headers}).then((res: any) => {
            const {data} = res.data
            if (data !== null && data.length > 0) {
                for(const element of data) {
                    const registerTime = moment(element.registerTime).format("YYYY-MM-DD HH:mm:ss")
                    const item: RegisterItem = {
                        registerTime,
                        account: element.account,
                        accountDesc: getAccountDesc(element.accountRole) ,
                        realName: element.realName,
                        department: element.department,
                        phoneNo: element.phoneNo,
                        email: element.email,
                    };
                    tableData.push(item)
                }
            }
        }).catch((reason: any) => {
            console.log(reason)
        })
    })
    


  </script>

<style scoped lang="scss">
    .table {
        width: 100%;
    }

</style>
  